<template>
  <div v-if="isOpen" class="overlay" :class="[marginStyle]">
    <div
      class="dialog"
      :class="{ openAnim, 'no-transition': isSwiping }"
      :style="computedDialogStyle"
      @transitionend="onTransitionEnd"
      @touchend="handleTouchEnd"
    >
      <div :class="closeStyle" ref="swipeDown">
        <button>
          <Icon @click.prevent="handleCloseClick" size="24" name="close"></Icon>
        </button>
      </div>
      <component :is="component" @click.stop @touchmove="(e) => e.stopPropagation()"></component>
    </div>
  </div>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useSwipe } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAdDialogStore } from '@/store/ad-dialog'
import { useAppStore } from '@/store/app'
import { usePreventTouchmove } from '@/compositions/mobile/preventTouchmove'
import components from './templates'

const adDialogStore = useAdDialogStore()
const { close } = adDialogStore
const { isOpen, type } = storeToRefs(adDialogStore)
const component = computed(() => components[type.value])

const appStore = useAppStore()
const { isMobile } = storeToRefs(appStore)

const marginStyle = computed(() => {
  return isMobile.value ? 'mobile' : 'desktop'
})

const closeStyle = computed(() => {
  return isMobile.value ? 'close-mobile' : 'close-desktop'
})

const openAnim = ref(false)
const applyDialogStyle = ref(true)

const onTransitionEnd = () => {
  if (!openAnim.value) close()
}

watch(
  isOpen,
  (v) => {
    if (v) {
      requestAnimationFrame(() => {
        openAnim.value = true
        applyDialogStyle.value = true
        translateYRef.value = 0
        console.log('isOpen 的 watch:', translateYRef.value)
      })
    }
  },
  { immediate: true },
)

// 手機版下滑關閉
const swipeDown = ref(null)
const translateYRef = ref(0)
const { lengthY, direction, isSwiping } = useSwipe(swipeDown)

watch(lengthY, (newValue) => {
  translateYRef.value = newValue
})

const handleTouchEnd = () => {
  if (isMobile.value) {
    if (direction.value === 'down' && translateYRef.value < -300) {
      translateYRef.value = -window.innerHeight
      openAnim.value = false
    } else {
      translateYRef.value = 0
    }
  }
}

const handleCloseClick = () => {
  applyDialogStyle.value = false
  openAnim.value = false
}

const computedDialogStyle = computed(() => {
  if (!applyDialogStyle.value) return {}
  if (isMobile.value) {
    return {
      transform: `translateY(${-translateYRef.value}px)`,
    }
  }
  return {}
})

// 滑動中關閉瀏覽器預設行為
usePreventTouchmove(swipeDown, () => translateYRef.value !== 0)
</script>
<style lang="scss" scoped>
.close {
  &-mobile {
    position: absolute;
    z-index: 100;
    top: 0;
    right: 5%;
    width: 100%;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
  }
  &-desktop {
    margin-bottom: -2.75rem;
    margin-right: 2.75rem;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: flex-end;
  }
}
.overlay {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000bf;
}
.dialog {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-out;
  &.no-transition {
    transition: none;
  }
}
.desktop {
  .dialog {
    width: 62.5rem;
    transform: scale(0);
    display: flex;
    flex-direction: column;

    &.openAnim {
      transform: scale(1);
    }
  }
}
.mobile {
  .dialog {
    width: 100%;
    height: 100%;
    transform: translateY(100%);

    &.openAnim {
      transform: translateY(0);
    }
  }
}
</style>
